<template>
  <div class="activity_new">
    <div>
      <ImgT class="imgs" :key="activityItem?.pic_link" :src="activityItem?.pic_link" alt="" />
    </div>

    <div class="content_box">
      <div class="content_box_title">{{ t("tasks") }}</div>
      <div class="content_box_main">
        <div class="item">
          <div class="item_left">
            <ImgT src="/imgs/activity/face_book.webp" :key="'face_book'" alt="" />
            <div class="item_txt">
              <span>{{ t("tasks") + 1 }}</span>
              <span>{{ t("follow_up_facebook") }}</span>
            </div>
          </div>
          <div :class="[
            'to_btn',
            { is_focus: newbees_info?.is_follow_fb || newbees_info?.status == 3 },
          ]" @click="goFollow(1)">
            {{ newbees_info?.is_follow_fb ? t("already_followed") : t("forward") }}
          </div>
        </div>
        <div class="item">
          <div class="item_left">
            <ImgT src="/imgs/activity/face_book_g.webp" :key="'face_book_g'" alt="" />
            <div class="item_txt">
              <span>{{ t("tasks") + 2 }}</span>
              <span>{{ t("join_up_facebook_group") }}</span>
            </div>
          </div>

          <div :class="[
            'to_btn',
            { is_focus: newbees_info?.is_follow_fb_group || newbees_info?.status == 3 },
          ]" @click="goFollow(2)">
            {{ newbees_info?.is_follow_fb_group ? t("already_followed") : t("forward") }}
          </div>
        </div>
        <div class="item">
          <div class="item_left">
            <ImgT src="/imgs/activity/telegram.webp" :key="'telegram'" alt="" />
            <div class="item_txt">
              <span>{{ t("tasks") + 3 }}</span>
              <span>{{ t("join_up_telegram_group") }}</span>
            </div>
          </div>
          <div :class="[
            'to_btn',
            { is_focus: newbees_info?.is_follow_tg_group || newbees_info?.status == 3 },
          ]" @click="goFollow(3)">
            {{ newbees_info?.is_follow_tg_group ? t("already_followed") : t("forward") }}
          </div>
        </div>
        <nut-button class="btn_5" @click="goFollow(4)">{{
          t("contactService")
        }}</nut-button>
      </div>
    </div>
    <!-- 活动规则 -->
    <div class="content_box">
      <div class="content_box_title">{{ t("event_content") }}</div>
      <div class="content_box_main content_box_list">
        <ol>
          <li>
            <span>1.</span>
            {{ t("newbie_content1") }}
          </li>
          <li>
            <span>2.</span>
            {{ t("newbie_content2") }}
          </li>
          <li>
            <span>3.</span>
            {{ t("newbie_content3") }}
          </li>
          <li>
            <span>4.</span>
            <span> {{ t("newbie_content4") }}</span>
          </li>
          <li>
            <span>5.</span>
            {{ t("newbie_content5") }}
          </li>
        </ol>
      </div>
    </div>
  </div>
  <div class="btn_group">
    <!-- <div class="btn_1">{{ t("first_deposit_activity_rule") }}</div> -->
    <!-- <nut-button class="btn_1"
      ><span class="btn_1_rule"> {{ t("first_deposit_activity_rule") }}</span></nut-button
    > -->
    <nut-button :class="['btn_2', { is_get: newbees_info?.status > 1 }]" @click="getFunds"
      :disabled="newbees_info?.status != 1 || is_get_funds">
      <div class="get_txt">
        <span class="amount">{{ Intl.NumberFormat().format(newbees_info?.amount) }}
        </span>
        <span>{{ newbees_info?.status > 1 || is_get_funds ? t("offer_geted") : t("offer_get") }}</span>
      </div>
    </nut-button>
    <nut-button class="btn_1" @click="submit">{{ t("share") }}</nut-button>
    <Toast v-model:visible="showToast">{{ toast_value }} </Toast>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { User } from "@/store/user";
import { useI18n } from "vue-i18n";
import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";
import { handleOpenLink } from "@/utils/publicMethods";
import Toast from "@/components/Toast.vue";
import { showDialog } from "@nutui/nutui";
import { useRouter } from "vue-router";
import eventBus from "@/lolo/eventBus";
const { bankCardInfoList } = storeToRefs(User(pinia));
const { t } = useI18n();
const router = useRouter();
defineProps({
  activityItem: {
    type: Object,
    default: () => { },
  },
});
const emits = defineEmits(["submitClick"]);

const is_get_funds = ref(false);
const newbees_info: any = ref({});
// const prise_info: any = ref({});

const showToast: any = ref(false);
const toast_value = ref("");

const submit = () => {
  emits("submitClick");
};

// 领取奖励
const getFunds = () => {
  const query = NetPacket.req_newbees_prize();
  PKwebsocket.instance.send(query, true);
};

const goFollow = (num: any) => {
  // 需要绑定银行卡
  if (newbees_info.value.is_bind_card >= 1) {
    if (bankCardInfoList.value.bank_card_info_list?.length > 0) {
    } else {
      showDialog({
        title: t("tip"),
        content: t("bindBankCard"),
        noCancelBtn: true,
        // onCancel,
        onOk: () => {
          router.push("/paymentManagement/bank");
        },
      });
      return;
    }
  }
  if (newbees_info.value?.status == 3) {
    return;
  }
  if (num == 4) {
    const query = NetPacket.req_contact_customer_service();
    PKwebsocket.instance.send(query, true, {
      callbackName: "msg_notify_newbees_prize",
      callback: () => { },
    });
  }
  if (num == 1 && newbees_info.value?.is_follow_fb) {
    return;
  }
  if (num == 2 && newbees_info.value?.is_follow_fb_group) {
    return;
  }
  if (num == 3 && newbees_info.value?.is_follow_tg_group) {
    return;
  }
  const obj: any = {
    1: "https://www.facebook.com/PKBET88",
    2: "https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2Fgroups%2Fpkbet88",
    3: "https://t.me/PKBET888",
    4: "https://t.me/PKBET01",
  };
  handleOpenLink(obj[num]);
};

// 新手消息获取
const get_newbees_info = (rs: any) => {
  newbees_info.value = rs;
};
const get_prize_info = () => {
  // prise_info.value = rs;
  is_get_funds.value = true;
  showToast.value = true;
  toast_value.value =
    t("receive_ok") + Intl.NumberFormat().format(newbees_info.value?.amount);
  setTimeout(() => {
    const query = NetPacket.req_newbees_info();
    PKwebsocket.instance.send(query, true, {
      callbackName: "msg_notify_newbees_info",
      callback: get_newbees_info,
    });
  }, 500);

};

// 获取已绑定的银行账号
const getMyBankList = () => {
  const req = NetPacket.req_bank_card_info_list();
  PKwebsocket.instance.send(req, true);
};

onMounted(async () => {
  getMyBankList();
  const query = NetPacket.req_newbees_info();
  PKwebsocket.instance.send(query, true, {
    callbackName: "msg_notify_newbees_info",
    callback: get_newbees_info,
  });
  // 回执监听
  eventBus.on('msg_notify_newbees_prize', get_prize_info)
});
</script>

<style lang="scss" scoped>
.activity_new {
  margin-bottom: 100px;
  // height: 100%;
  // padding: 10px 0px 100px;
  // overflow-y: auto;

  .imgs {
    width: 100%;
  }

  .content_box {
    margin-top: 10px;
    width: 100%;

    ol {
      li {
        display: flex;
        gap: 5px;
      }
    }

    border-radius: 8px;
    background: #131232;
    overflow: hidden;

    .content_box_title {
      height: 34px;
      background: #1b1f4b;
      color: #ffffff;
      line-height: 34px;
      padding-left: 10px;
    }

    .content_box_list {
      // margin-bottom: 20px;
    }

    .content_box_main {
      padding: 20px 11px;

      .item {
        width:322px;
        margin-bottom: 10px;
        height: 64px;
        background: #1b1f4b;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        .item_left {
          height: 100%;
          display: flex;
          align-items: center;

          img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
          }
        }

        .item_txt {
          display: flex;

          flex-direction: column;
          margin-bottom: 2px;
          gap: 5px;

          span {
            &:nth-child(1) {
              color: #ffffff;
            }

            &:nth-child(2) {
              color: #c6c4f5;
              font-size: 12px;
            }
          }
        }

        .to_btn {
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;

          height: 36px;
          min-width: 74px;
          border-radius: 8px;
          color: #ffffff;
          text-align: center;
          line-height: 32px;
          background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
        }

        .is_focus {
          background: #a6a2ba;
        }
      }
    }
  }
}

.btn_group {
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0;
  display: flex;
  height: 64px;
  align-items: center;
  box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
  background: var(---, #131232);
  padding-left: 13px;

  gap: 8px;

  .btn_1 {
    width: 48%;
    height: 44px;
    border-radius: 8px;
    box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;

    color: #C6C4F5;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #282747 !important;
  }

  .btn_2 {
    height: 40px;
    border-radius: 8px;
    width: 48%;
    box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;

  }
}

.submit {
  width: 95%;
  height: 44px;
  border-radius: 8px;
  position: fixed;
  bottom: 2px;
  left: 2.5%;
}

.fs_12 {
  font-size: 12px;
}

.num_color {
  margin-left: 5px;
  color: #ffe141;
}

ol {
  color: #ffffff;
  font-size: 13px;
  padding: 0 5px;

  li {
    margin-bottom: 6px;
    line-height: 18px;
  
  }
}

.my_record {
  position: fixed;
  right: 10px;
  bottom: 100px;
  height: 50px;
}

.btn_5 {
  height: 44px;
  border-radius: 8px;
  width: 302px;
  margin-left: 10px;
  box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;

}

.get_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 20px;

  .amount {
    color: #ffe141;
  }
}

.is_get {
  background: #a6a2ba;
}

.btn_1_rule {
  font-size: 12px;
}
</style>
